<template>
  <div class="login-account-form">
    <van-form ref="loginForm" :model="loginForm">
      <div class="form_list">
        <div class="form-label">账号</div>
        <div class="form-con">
          <van-field
            v-model="loginForm.loginName"
            name="loginName"
            placeholder="请输入账号,即手机号"
            :rules="rules.loginName" />
        </div>
      </div>
      <div class="form_list">
        <div class="form-label">密码</div>
        <div class="form-con">
          <van-field
            v-model="loginForm.loginPassword"
            :type="inputStyle"
            name="loginPassword"
            placeholder="请输入您的密码"
            :rules="rules.loginPassword"></van-field>
          <span @click="togglePwdDisplay">
            <i class="iconfont psw iconbiyanjing" v-show="inputStyle === 'password'"></i>
            <i class="iconfont psw iconyanjing" v-show="inputStyle === 'text'"></i>
          </span>
        </div>
      </div>
      <div class="form-use">
        <div class="forget" @click="$emit('show-forget')">忘记密码？</div>
        <div class="remember">
          <!-- <van-checkbox v-model="isRemember" shape="square" checked-color="#004db6">记住密码</van-checkbox> -->
        </div>
      </div>
      <div class="commit" @click="alyOnSubmit">登录</div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'AccountForm',
  components: {},
  props: {},
  data() {
    return {
      loginForm: {
        loginName: '',
        smCode: '',
        loginPassword: '',
      },
      rules: {
        loginName: [{ required: true, message: '请输入您的账号' }],
        loginPassword: [{ required: true, message: '请输入您的密码' }],
      },
      inputStyle: 'password',
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.$refs.loginForm.resetValidation()
  },
  methods: {
    togglePwdDisplay() {
      this.inputStyle = this.inputStyle === 'password' ? 'text' : 'password'
    },
    alyOnSubmit() {
      this.$refs.loginForm
        .validate()
        .then(() => {
          this.$emit('login', this.loginForm)
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.login-account-form {
  width: 100%;
  .form_list {
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 10px;
    padding-bottom: 5px;
    .form-label {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .form-con {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .iconfont {
        font-size: 22px;
        color: #a8d2f7;
        &.psw {
          margin-right: 20px;
        }
      }
      .van-cell {
        height: 100%;
        font-size: 14px;
        background-color: transparent;
      }
    }
  }
  .form-use {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #004db6;
    .van-checkbox__icon--square {
      .van-icon-success {
        border-radius: 2px;
      }
    }
    .van-checkbox__label {
      color: #004db6;
    }
  }
  .commit {
    margin-top: 30px;
    height: 45px;
    line-height: 45px;
    border-radius: 6px;
    background: #004db6;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
  }
}
</style>
